<template>
  <div id="contract">
    <div class="tab-wrap">
      <div>
        <el-tabs v-model.trim="curType">
          <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
          </el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-button
          icon="iconfont icon-jiufuqianbaoicon06"
          size="mini"
          class="exportBtn add"
          @click="addContract"
          v-if="enterpriseType != 2"
        >
          创建合同
        </el-button>
      </div>
    </div>
    <div class="list-container">
      <not-effective v-if="curType == '0'" @checkContract="checkContract" ref="notEffective"></not-effective>
      <effective v-if="curType == '1'" @checkContract="checkContract" ref="effective"></effective>
      <apply-change v-if="curType == '2'" @checkContract="checkContract" ref="apply"></apply-change>
      <contract-cancel v-if="curType == '3'" @checkContract="checkContract"></contract-cancel>
      <contract-completed v-if="curType == '4'"></contract-completed>
    </div>
    <el-dialog
      width="1200px"
      :center="true"
      :title="title"
      v-if="conVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="conVisible"
    >
      <contract-from
        ref="contract"
        :check="Check"
        :componyType="enterpriseType == 1 ? true : false"
        :create="isCreate"
        :signed="singed"
        :apply="apply"
        :checkEff="checkEff"
        :applyCheck="applyCheck"
        :componyName="componyName"
        @apply="applyChange"
        @close="close"
        @save="save"
        :contractId="contractId"
      ></contract-from>
    </el-dialog>
    <el-dialog
      class="history"
      width="1200px"
      :center="true"
      title="查看合同变更"
      v-if="historyVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="historyVisible"
    >
      <div>
        <el-tabs v-model.trim="activeName">
          <el-tab-pane label="合同详情" name="1">
            <div class="tabs">
              <el-tabs type="border-card" v-model.trim="active" class="histortcon">
                <el-tab-pane v-for="item in contractDetail" :key="item.id" :name="item.id + ''" :label="tabTitle(item)">
                  <contract-from
                    :check="true"
                    :checkEff="true"
                    :componyType="enterpriseType == 1 ? true : false"
                    :create="false"
                    :historyObj="item"
                  >
                  </contract-from>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane label="审核记录" name="2">
            <el-table
              :data="auditData"
              border
              class="inventory_table"
              :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
              :row-class-name="tabRowClassName"
            >
              <el-table-column width="60" align="center" type="index" label="序号">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="创建人" prop="founder"> </el-table-column>
              <el-table-column align="center" label="审核意见" prop="auditOpinion"> </el-table-column>
              <el-table-column align="center" label="审核结果" prop="auditResults">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.auditResults | reviewFilter }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="审核时间" prop="auditTime"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContractFrom from '../../../components/ContractFrom.vue'
import ApplyChange from './applyChange/applyChange.vue'
import ContractCancel from './contractCancel/contractCancel.vue'
import ContractCompleted from './contractCompleted/contractCompleted.vue'
import Effective from './effective/effective.vue'
import notEffective from './notEffective/notEffective.vue'
export default {
  components: {
    notEffective,
    ContractFrom,
    Effective,
    ApplyChange,
    ContractCancel,
    ContractCompleted
  },
  data() {
    return {
      contractDetail: [],
      auditData: [],
      historyVisible: false,
      activeName: '1',
      active: '',
      enterpriseType: localStorage.getItem('enterpriseType'),
      title: '创建合同',
      singed: false,
      Check: false,
      applyCheck: false,
      isCreate: true,
      contractId: null,
      tip: '',
      apply: false,
      conVisible: false,
      checkEff: false,
      curType: '0',
      partTypeList: [
        {
          value: '0',
          name: '未生效'
        },
        {
          value: '1',
          name: '已生效'
        },
        {
          value: '2',
          name: '变更/取消中'
        },
        {
          value: '3',
          name: '已取消'
        },
        {
          value: '4',
          name: '已完成'
        }
      ],
      componyName: ''
    }
  },
  filters: {
    reviewFilter(val) {
      switch (val) {
        case 0:
          return '未审核'
        case 1:
          return '通过'
        case 2:
          return '驳回'
        case 3:
          return '撤销'
        default:
          break
      }
    }
  },
  mounted() {},
  methods: {
    tabTitle(item) {
      let str = ''
      let type = item.type == 1 ? '变更' : '取消'
      let changeState =
        item.changeState == 0
          ? '[未审核]'
          : item.changeState == 1
          ? '[审核通过]'
          : item.changeState == 2
          ? '[审核驳回]'
          : '[审核撤销]'
      str = item.createTime + ' ' + item.createBy + ' 申请' + type + changeState
      return str
    },
    getContractHistory(id, state) {
      this.$https({
        method: 'post',
        url: '/contract/queryChangesList',
        data: {
          id: id,
          changeStateType: state
        }
      })
        .then(res => {
          if (res.code === 0) {
            if (!res.data) {
              return false
            }
            this.auditData = res.data.changeAuditRecordVoList
            this.contractDetail = res.data.queryContractChangeVoList
            this.active = res.data.queryContractChangeVoList[0].id + ''
            this.historyVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    applyChange() {
      this.conVisible = false
      if (this.tip === 'eff') {
        this.$refs.effective.getData()
      } else {
        this.$refs.apply.getData()
      }
    },
    close() {
      this.$refs.contract.contractObj = {}
      this.$refs.contract.inBiddList = []
      this.$refs.contract.biddMaterials = []
      this.conVisible = false
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    save() {
      this.conVisible = false
      this.$refs.notEffective.getData()
    },
    checkContract(val, scope, tip) {
      this.tip = ''
      this.apply = false
      this.checkEff = false
      this.applyCheck = false
      if (val === '查看') {
        this.title = '查看合同'
        this.contractId = scope.id
        this.singed = false
        this.Check = true
      } else if (val === '查看历史') {
        if (tip) {
          this.getContractHistory(scope.id, null)
          return false
        }
        if (scope.whetherToChange === 2) {
          this.getContractHistory(scope.id, 1)
        } else {
          this.getContractHistory(scope.id, null)
        }

        return false
      } else if (val === '查看已生效') {
        this.title = '查看已生效合同'
        this.contractId = scope.id
        this.checkEff = true
        this.singed = false
        this.Check = true
      } else if (val === '编辑') {
        this.title = '编辑合同'
        this.contractId = scope.id
        this.singed = false
        this.Check = false
      } else if (val === '签订合同') {
        this.title = '签订合同'
        this.contractId = scope.id
        this.componyName = scope.providerName
        this.Check = true
        this.singed = true
      } else if (val === '变更') {
        this.title = '查看合同'
        this.contractId = scope.id
        this.checkEff = true
        this.singed = false
        this.Check = true
        this.applyCheck = true
        this.tip = tip
      } else if (val === '再次申请') {
        this.apply = true
        this.title = '变更合同'
        this.Check = false
        this.contractId = scope.id
        this.tip = tip
      }
      this.isCreate = false
      this.conVisible = true
    },
    closeDialog(done) {
      done()
    },
    addContract() {
      this.title = '创建合同'
      this.isCreate = true
      this.Check = false
      this.applyCheck = false
      this.contractId = null
      this.conVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
#contract {
  height: 100%;
  position: relative;

  .list-container {
    height: calc(100% - 116px);
    padding: 16px 16px 40px 16px;
  }
  .biddBtn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
  }
  .sc,
  .ty {
    color: #ff3d3d;
  }
  .add {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 114px;
  }
  /deep/ .el-tabs__nav-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 20px;
    border-right: 1px solid #ebebeb;
  }
  /deep/ .el-tabs__nav-next {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 20px;
    border-left: 1px solid #ebebeb;
  }
  // .history {
  //   .histortcon {
  //     /deep/.el-tabs__item.is-active {
  //       border-top: 2px solid #fa7355;
  //       box-sizing: border-box;
  //     }
  //   }
  // }
  .history {
    /deep/ .el-tabs__header {
      margin: 0 0 30px !important;
    }
  }
  .histortcon {
    /deep/.el-tabs__header {
      background-color: #fff;
    }
    /deep/ .el-tabs__item {
      border: 1px solid #ebebeb;
      border-bottom: none;
    }
  }
  .tab-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #ebebeb;
    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }
    /deep/ .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
  }
}
</style>
